<template>
    <div class="right-menu">
        <el-dropdown class="avatar-container" trigger="click">
            <div class="avatar-wrapper">
                <img :src="this.userInfo.avatar" class="user-avatar" />
                <i class="el-icon-caret-bottom" />
            </div>
            <el-dropdown-menu slot="dropdown" class="user-dropdown" trigger="click">
                <el-dropdown-item>
                    <span type="danger" @click="toWelcome"><span class="el-icon-house"></span> &nbsp;系统首页</span>
                </el-dropdown-item>
                <el-dropdown-item>
                    <span type="danger" @click="getContact"><span class="el-icon-ship"></span> &nbsp;交流讨论</span>
                </el-dropdown-item>
                <el-dropdown-item>
                    <span type="danger" @click="logout"
                        ><span class="el-icon-switch-button"></span> &nbsp;退出登入</span
                    >
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
export default {
    name: "Headermenu",

    data() {
        return {
            userInfo: {},
        };
    },
    created() {
        this.userInfo = this.$store.state.userInfo;
    },

    mounted() {},

    methods: {
        toWelcome() {
            this.$router.push("/welcome");
        },
        getContact() {},
        // 退出登录
        async logout() {
            const res = await this.$confirm("此操作将退出系统, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消退出登入",
                });
            });
            if (res === "confirm") {
                window.localStorage.clear();
                await this.$router.push("/login");
                this.$message({
                    type: "success",
                    message: "已退出登录",
                });
            }
        },
    },
};
</script>

<style lang="less" scoped>
.right-menu {
    margin-top: 5px;
    float: right;
    height: 100%;
    line-height: 50px;

    &:focus {
        outline: none;
    }

    .right-menu-item {
        display: inline-block;
        padding: 0 8px;
        height: 100%;
        font-size: 18px;
        color: #5a5e66;
        vertical-align: text-bottom;

        &.hover-effect {
            cursor: pointer;
            transition: background 0.3s;

            &:hover {
                background: rgba(0, 0, 0, 0.025);
            }
        }
    }

    .avatar-container {
        margin-right: 30px;

        .avatar-wrapper {
            margin-top: 5px;
            position: relative;

            .user-avatar {
                cursor: pointer;
                width: 40px;
                height: 40px;
                border-radius: 10px;
            }

            .el-icon-caret-bottom {
                cursor: pointer;
                position: absolute;
                right: -20px;
                top: 25px;
                font-size: 12px;
            }
        }
    }
}
</style>
